<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
<style>
  .load{
    position: fixed;
    top: 50%;
    left: 50%;
  }
</style>
</head>
<body>
  <div id="box">
    <div v-for="item in refundList" v-if='isLoad==false'>
      <p>{{item.apply_name}}</p>
      <p>{{item.event_name}}</p>
    </div>
    <div class="load" v-if='isLoad'>
      <van-loading type="spinner" color="#1989fa" />
    </div>
  </div>
  <script>
    var box=new Vue({
      el:"#box",
      data(){
        return{
          refundList:[],
          isLoad:true,
        }
      },
      created() {
        axios.defaults.headers.common["token"]="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6IjRmMWcyM2ExYXNkIn0.eyJpc3MiOiJodHRwOlwvXC93d3cueXVuYmlzYWkuY29tIiwiYXVkIjoibHN3bF9zbmFrZSIsImp0aSI6IjRmMWcyM2ExYXNkIiwiaWF0IjoxNTg3NTIxMzYwLCJuYmYiOjE1ODc1MjEzNjAsImV4cCI6MTU4NzUzNTc2MCwiaW5mbyI6eyJuYW1lIjoiXHU3NjdkXHU5MWQxXHU2YzQ5XHU1YmFiXHU1NmY0XHU2OGNiXHU1MzRmXHU0ZjFhIiwibG9nb19pbWciOiJcL3VwbG9hZGZpbGVzXC9PcmdcL09yZ183ODBcLzE1MzAxNjgzNjYuanBnIiwidXNlX2lkIjoiNzY5MyIsImxvZ2luX3R5cGUiOiIyIiwiaW5mb19pZCI6Ijc4MCIsImxvZ2luX21vYiI6IjEzNjY2Njk4MDA5IiwibG9naW5fbmFtZSI6Ilx1NzY3ZFx1OTFkMVx1NmM0OVx1NWJhYlx1NTZmNFx1NjhjYlx1NTM0Zlx1NGYxYSIsImxpbmttYW4iOiJcdTgwNTRcdTdjZmJcdTRlYmEiLCJwZXJzb24iOiJcdTZjNmFcdTg2NGVcdTVmNmEiLCJsb2dpbnNpZ24iOiIyOTM1IiwiZ3JhZGUiOm51bGwsIm1heGdyYWRlIjoiMSIsImF1dGhlbnRpY2F0ZSI6IjEiLCJpc192b3VjaGVyIjowfX0.l7k01B0hfo-mAuLRqZytTHn-7PfN-KbOuzT-P3MvaqM";
        let _this=this;
        _this.isLoad=true
      },
      mounted() {
        let _this=this,
        init=async ()=>{
          await _this.getData()
          setTimeout(function(){
            _this.isLoad=false;
          },1000)
        }
        init()
      },
      methods:{
        getData(){
          let _this=this;
          // axios({
          //   method:"get",
          //   url:`http://query.yunbisai.com/refund-test/manager/get_refund_detail`,
          //   data:{state: 'all',pageNum: 1,pageSize: 12},
          //   header:{
          //   'Content-Type':'application/x-www-form-urlencoded'
          //   }
          // }).then((res)=>{
          //   console.log(res)
          // })
          axios.get(`http://query.yunbisai.com/refund-test/manager/get_refund_detail`,{params:{state: 'all',pageNum: 1,pageSize: 12}})
            .then((res)=>{
              let e=res.data;
              if(e.errcode==0){
                _this.refundList=e.data.details.list;
              }
            })
        },
      axiosPost(method,url,data) {
        let result = axios({
          method: method,
          url: url,
          data: data,
          transformRequest:[function(data){
            let ret = '';
            for(let i in data){
              ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+"&";
            }
            return ret;
          }],
          header:{
            'Content-Type':'application/x-www-form-urlencoded'
          }
          }).then(resp=> {
              return resp.data;
          }).catch(error=>{
              return "exception="+error;
          });
          return result;
        }
      }
    })
  </script>
</body>
</html>